<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
<style>
    #content{
        background-color: blue;
        display: flex;

    }
    #header{
        background-color: gold;
        text-align: center;
        overflow: hidden;

    }
    #header li{
        float: left;
        background-color: blueviolet;
        margin-left: 100px;
    }
    #right{
        width: 45%;
    }
    #left{
        width: 45%;
    }
    #footer{
        text-align: center;
    }
    li{list-style: none}

</style>
</head>
<body>
<div id="root">
    <my-header ></my-header>
    <div id="content">
    <content-left ></content-left>
    <right-content></right-content>
    </div>
    <my-footer></my-footer>
</div>
<div id="app">


</div>
<template id="content-left">
    <ul id="left">
        <li>菜单</li>
        <li>菜单</li>
        <li>菜单</li>
        <li>菜单</li>
        <li>菜单</li>
    </ul>
</template>
<template id="content-right">
    <div  id="right">
        <h2>是右边的内容</h2>
        <span>李白</span>
        <span>欧阳修</span>
        <span>李清照</span>
        <span>路由</span>
    </div>
</template>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    <!--    全局-->
    Vue.component("my-header", {
//    指定组件模板结构
        template: `<ul id="header">
<h2>辽阔的善</h2>
<li><a href="###">分类1</a></li>
<li><a href="###">分类2</a></li>
<li><a href="###">分类3</a></li>
<li><a href="###">分类4</a></li>
<li><a href="###">分类5</a></li>
</ul>`
    });
    Vue.component("my-footer",{
        template: `<div id="footer"><h3>这是页面的尾部</h3><span>电话</span><span>游戏</span><span>地址</span><span>哈哈</span></div>`
    })
    Vue.component("content-left",{
        template:"#content-left"
    })

    let root = new Vue({
        el: "#root",
        data: {},
        //  函数
        methods: {},
        components:{
            "right-content":{
                template:"#content-right",
            }
        }
    });
    let app=new Vue({
        el:"#app"
    })
</script>
